import { cn } from "common-web";
import type { FunctionalComponent as FC } from "vue";
import { computed, type ImgHTMLAttributes } from "vue";

export type AvatarShape = "circle" | "square";
export type AvatarSize = "sm" | "md" | "lg";

type AvatarProps = ImgHTMLAttributes & {
  shape?: AvatarShape | undefined;
  size?: AvatarSize | undefined;
};

type AvatarType = FC<AvatarProps>;

const Avatar: AvatarType = (p) => {
  const shapeClass = computed(() => {
    switch (p.shape) {
      case "square":
        return "rounded-sm";
      default:
        return "rounded-full";
    }
  });

  const sizeClass = computed(() => {
    switch (p.size) {
      case "sm":
        return "px-2 py-1 h-8  p-0 w-8  text-sm";
      case "lg":
        return "px-4 py-2 h-12 p-0 w-12 text-lg";
      default:
        return "px-4 py-2 h-10 p-0 w-10 text-sm";
    }
  });

  return (
    <img
      class={cn(
        "ring-2 ring-gray-200 border border-gray-300 flex items-center justify-center",
        sizeClass.value,
        shapeClass.value,
        p.class,
      )}
      alt="avatar"
    />
  );
};

Avatar.props = ["size", "shape", "class"]; // TODO: 组件属性透传问题都解决一下

export default Avatar;
